<template>
  <div class="dashboard-container">
    <el-card class="role-card">
      <!-- 页面头部 -->
      <el-row type="flex" justify="end" class="header">
        <el-col align="right">
          <el-button size="small" type="primary" @click="addRole">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 放置表格 -->
      <el-table border class="table-style" :data="roleList">
        <el-table-column prop="title" label="角色名称"></el-table-column>
        <el-table-column prop="description" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button size="small" type="primary" @click="assignPermissions(row.id)">分配权限</el-button>
            <el-button size="small" @click="redactRole(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增/编辑弹窗 -->
    <addRolePopup :title="title" ref="addRolePopup" @updateEvent="getRolesList" :showDialog.sync="visibleDialog"/>
    <!-- 分配权限弹窗 -->
    <assignPermission :showDialog.sync="showDialog" ref="assignPerm"/>
  </div>
</template>

<script>
import { getRolesList, delRole } from "@/api/roles";
// 导入组件
import addRolePopup from "./components/addRolePopup.vue";
import assignPermission from "./components/assignPermission.vue";
export default {
  // 注册组件
  components: { addRolePopup ,assignPermission},
  data() {
    return {
      title:'', // 弹窗标题
      roleList: [], // 角色列表
      visibleDialog: false, // 新增/编辑弹窗默认关闭
      showDialog: false, // 分配权限弹窗
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 获取角色列表
    async getRolesList() {
      // 解构赋值
      const { data } = await getRolesList()
      console.log(52, data);
      this.roleList = data
    },
    // 新增角色
    addRole() {
      this.title = '新增角色'
      // 显示弹窗
      this.visibleDialog = true
    },
    // 分配权限
    assignPermissions(id) {
      console.log('点击了分配权限');
      this.showDialog = true
       // 通过ref属性获取组件,然后调用组件中的函数
      //  console.log(this.$refs.assignPerm);
       this.$refs.assignPerm.getRolePermission(id)
    },
    // 编辑
    redactRole(id) {
      this.title = '编辑角色'
      console.log('点击了编辑', id);
      // 显示弹窗
      this.visibleDialog = true
      // 调用弹窗组件的方法
      this.$refs.addRolePopup.getRoleDetail(id)
    },
    // 删除角色
    delRole(id) {
      // console.log('点击了删除', id);
      //  提示用户删除成功
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delRole(id)
        // 刷新页面
        this.getRolesList()
        // 提示用户
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.role-card {
  margin: 30px;

  .header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e6e9;
  }

  .table-style {
    margin-top: 20px;
    border-bottom: 1px solid #e9e6e9;
  }

  .footer {
    margin-top: 30px;
  }
}
</style>
